<!DOCTYPE html>
<p>There should be a space between every A and B.</p>
<div id="host1"> <span>B</span></div>
<div id="host2"><span style="position:absolute">A</span></div>
<div id="host3"><span slot="b">B</span> <span slot="a" style="position:absolute">A</span></div>
<div id="host4"><span style="display:contents"></span> <span>B</span></div>
<script>
  var root1 = host1.attachShadow({mode:"open"});
  root1.innerHTML = '<span style="position:absolute">A</span><slot></slot>';
  host1.offsetTop; // Force layout tree generation.
  root1.querySelector("span").style.position = "static";

  var root2 = host2.attachShadow({mode:"open"});
  root2.innerHTML = "<slot></slot> <span>B</span>";
  host2.offsetTop; // Force layout tree generation.
  host2.querySelector("span").style.position = "static";

  var root3 = host3.attachShadow({mode:"open"});
  root3.innerHTML = '<slot name="a"></slot><slot></slot><slot name="b"></slot>';
  host3.offsetTop; // Force layout tree generation.
  host3.querySelector("[slot=a]").style.position = "static";

  var root4 = host4.attachShadow({mode:"open"});
  root4.innerHTML = '<div id="a">A</div><slot></slot>';
  host4.offsetTop; // Force layout tree generation.
  root4.querySelector("#a").style.display = "inline";
</script>
